<template>
  <div class="assets-tree flex-y">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="专题数据" name="topic">
        <div class="search">
          <el-input
            class="search-input"
            placeholder="请输入关键词"
            v-model="filterText"
            size="small"
            suffix-icon="el-icon-search"
            clearable
          />
        </div>

        <el-scrollbar class="flex-1">
          <div
            class="flex-y"
            v-for="(item, index) in treeData"
            :key="item.pkid"
          >
            <div class="title flex-x cross-center">
              <img
                class="title-prefix"
                :src="TitlePrefix"
                :alt="item.catalogName"
              />
              <span>{{ item.catalogName }}</span>
            </div>

            <!-- default-expand-all -->
            <el-tree
              v-if="item.children.length"
              :data="item.children"
              :props="treeProps"
              :ref="'tree' + index"
              node-key="pkid"
              :render-after-expand="false"
              :expand-on-click-node="false"
              :default-expanded-keys="
                Array.from(defaultExpandedKeys)
              "
              @node-click="handleNodeClick"
              @node-expand="handleNodeExpand"
              @node-collapse="handleNodeCollapse"
              :filter-node-method="filterNode"
            >
              <div
                class="custom-tree-node flex-x cross-center"
                slot-scope="{ node, data }"
                style="color: #fff"
              >
                <div
                  class="legend flex-x cross-center flex-1"
                >
                  <!-- 文件夹图标 -->
                  <el-image
                    v-if="data.catalogName"
                    :src="
                      require('@/assets/img/folder-icon.png')
                    "
                  />
                  <!-- 二维服务图标 -->
                  <el-image
                    v-if="
                      data.sourceName &&
                      data.serviceType !== '27'
                    "
                    :src="
                      require('@/assets/img/2-dimension-icon.png')
                    "
                  />
                  <!-- 三维服务图标 -->
                  <el-image
                    v-if="
                      data.sourceName &&
                      data.serviceType === '27'
                    "
                    :src="
                      require('@/assets/img/3-dimension-icon.png')
                    "
                  />

                  <!-- 名称 -->
                  <span
                    v-if="data.sourceName"
                    class="margin"
                    >{{ data.sourceName }}</span
                  >
                  <span
                    v-if="data.catalogName"
                    class="margin"
                    >{{ data.catalogName }}</span
                  >

                  <el-image
                    v-if="data.img"
                    class="legend-image"
                    :src="data.img"
                  >
                    <div slot="error" class="image-slot">
                      <div class="error"></div>
                    </div>
                  </el-image>
                  <!-- rest服务图例颜色，可能无法取到图片，暂时用此替代 -->
                  <div
                    class="legend-image"
                    v-if="data.color"
                    :style="{
                      backgroundColor: `rgba(${data.color.red}, ${data.color.green}, ${data.color.blue}, ${data.color.alpha})`
                    }"
                  />

                  <span v-if="data.name" class="margin">{{
                    data.name
                  }}</span>
                </div>

                <!-- 服务加载显示状态图标 -->
                <transition name="toggle">
                  <img
                    v-show="data.show"
                    :src="Eye"
                    alt="已加载服务"
                  />
                </transition>
              </div>
            </el-tree>
          </div>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="数据目录" name="all">
        <div class="search">
          <el-input
            class="search-input"
            placeholder="请输入关键词"
            v-model="allFilterText"
            size="small"
            suffix-icon="el-icon-search"
            clearable
          />
        </div>

        <el-scrollbar class="flex-1">
          <div
            class="flex-y"
            v-for="(item, index) in allTreeData"
            :key="item.pkid"
          >
            <div class="title flex-x cross-center">
              <img
                class="title-prefix"
                :src="TitlePrefix"
                :alt="item.catalogName"
              />
              <span>{{ item.catalogName }}</span>
            </div>

            <el-tree
              v-if="item.children.length"
              :data="item.children"
              :props="treeProps"
              :ref="'allTree' + index"
              node-key="pkid"
              :render-after-expand="false"
              :expand-on-click-node="false"
              :default-expanded-keys="
                Array.from(allDefaultExpandedKeys)
              "
              @node-click="handleAllNodeClick"
              @node-expand="handleAllNodeExpand"
              @node-collapse="handleAllNodeCollapse"
              :filter-node-method="filterAllNode"
            >
              <div
                class="custom-tree-node flex-x cross-center"
                slot-scope="{ node, data }"
                style="color: #fff"
              >
                <div
                  class="legend flex-x cross-center flex-1"
                >
                  <!-- 文件夹图标 -->
                  <el-image
                    v-if="data.catalogName"
                    :src="
                      require('@/assets/img/folder-icon.png')
                    "
                  />
                  <!-- 二维服务图标 -->
                  <el-image
                    v-if="
                      data.sourceName &&
                      data.serviceType !== '27'
                    "
                    :src="
                      require('@/assets/img/2-dimension-icon.png')
                    "
                  />
                  <!-- 三维服务图标 -->
                  <el-image
                    v-if="
                      data.sourceName &&
                      data.serviceType === '27'
                    "
                    :src="
                      require('@/assets/img/3-dimension-icon.png')
                    "
                  />

                  <!-- 名称 -->
                  <span
                    v-if="data.sourceName"
                    class="margin"
                    >{{ data.sourceName }}</span
                  >
                  <span
                    v-if="data.catalogName"
                    class="margin"
                    >{{ data.catalogName }}</span
                  >

                  <el-image
                    v-if="data.img"
                    class="legend-image"
                    :src="data.img"
                  >
                    <div slot="error" class="image-slot">
                      <div class="error"></div>
                    </div>
                  </el-image>
                  <!-- rest服务图例颜色，可能无法取到图片，暂时用此替代 -->
                  <div
                    class="legend-image"
                    v-if="data.color"
                    :style="{
                      backgroundColor: `rgba(${data.color.red}, ${data.color.green}, ${data.color.blue}, ${data.color.alpha})`
                    }"
                  />

                  <span v-if="data.name" class="margin">{{
                    data.name
                  }}</span>
                </div>

                <!-- 服务加载显示状态图标 -->
                <transition name="toggle">
                  <img
                    v-show="data.show"
                    :src="Eye"
                    alt="已加载服务"
                  />
                </transition>
              </div>
            </el-tree>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TitlePrefix from '@/assets/img/title-prefix.png'
import Eye from '@/assets/img/eye.png'
import { treeBySpecialType } from '@/api/tree'
import { getAction } from '@/utils/helper'
import axios from 'axios'
import New from '@/utils/new'
import { retrieveDataServiceById } from '@/api/multiple-dataservice'

let _layerManager

export default {
  name: 'AssetsTree',
  inject: ['viewerId'],
  props: {
    topic: {
      type: String,
      default: ''
    },
    legendData: {
      type: Object
    }
  },
  data() {
    return {
      TitlePrefix,
      Eye,
      activeTab: 'topic',
      treeProps: {
        children: 'children'
        // label: 'name'
      },
      // 专题数据
      treeData: [],
      layerList: [],
      filterText: '',
      list: [],
      // 数据目录
      allTreeData: [],
      allLayerList: [],
      allFilterText: '',
      allList: [],
      defaultExpandedKeys: new Set(),
      allDefaultExpandedKeys: new Set()
    }
  },
  async created() {
    const { layerManager } = await getAction(this.viewerId)
    _layerManager = layerManager
    this.layerList = []
    this.getRightTree(this.topic)
    // this.$bus.$on('currentCatalogNode', (data) => {
    //   console.log('data', data);
    // });
    this.$bus.$on(
      'addTreeItemLegendChildren',
      (legendDataList, id) => {
        // console.log('refs', this.$refs)
        this.treeData.forEach((item, index) => {
          if (
            this.$refs['tree' + index] &&
            this.$refs['tree' + index].length
          ) {
            // 目录下无数据挂载时，el-tree不渲染，导致$refs中无对应ref，需判断非空性
            const node =
              this.$refs['tree' + index][0].getNode(id)
            if (node) {
              // console.log('添加图例', legendDataList)
              node.data.children.splice(
                0,
                node.data.children.length
              )
              node.childNodes.splice(
                0,
                node.childNodes.length
              )
              legendDataList.forEach((item) => {
                this.$refs['tree' + index][0].append(
                  item,
                  node.data.pkid
                )
              })
            }
          }
        })
        this.allTreeData.forEach((item, index) => {
          if (
            this.$refs['allTree' + index] &&
            this.$refs['allTree' + index].length
          ) {
            // 目录下无数据挂载时，el-tree不渲染，导致$refs中无对应ref，需判断非空性
            const node =
              this.$refs['allTree' + index][0].getNode(id)
            if (node) {
              // console.log('添加图例', legendDataList)
              node.data.children.splice(
                0,
                node.data.children.length
              )
              node.childNodes.splice(
                0,
                node.childNodes.length
              )
              legendDataList.forEach((item) => {
                this.$refs['allTree' + index][0].append(
                  item,
                  node.data.pkid
                )
              })
            }
          }
        })
      }
    )
  },
  watch: {
    topic() {
      this.treeData = []
      this.allTreeData = []
      this.layerList.map((item) => {
        _layerManager.del(item.pkid)
      })
      this.allLayerList.map((item) => {
        _layerManager.del(item.pkid)
      })
      this.layerList = []
      this.allLayerList = []
      this.getRightTree(this.topic)
    },
    filterText(val) {
      this.treeData.map((item, index) => {
        if (this.$refs['tree' + index]) {
          this.$refs['tree' + index][0].filter(val)
        }
      })
    },
    allFilterText(val) {
      this.allTreeData.map((item, index) => {
        if (this.$refs['allTree' + index]) {
          this.$refs['allTree' + index][0].filter(val)
        }
      })
    },
    layerList(val) {
      New.$emit('layerList', val)
    },
    allLayerList(val) {
      New.$emit('layerList', val)
    }
  },
  methods: {
    filterNode(value, data) {
      // console.log('filterNode', value, data)
      if (!value) return true
      if (data.sourceName) {
        return data.sourceName.indexOf(value) !== -1
      }
      if (data.catalogName) {
        return data.catalogName.indexOf(value) !== -1
      }
    },
    filterAllNode(value, data) {
      // console.log('filterNode', value, data)
      if (!value) return true
      if (data.sourceName) {
        return data.sourceName.indexOf(value) !== -1
      }
      if (data.catalogName) {
        return data.catalogName.indexOf(value) !== -1
      }
    },
    getRightTree(topicType) {
      if (!topicType) {
        return
      }
      this.treeData = []
      this.allTreeData = []
      this.getTreeDataRight(topicType)
      this.getAllTreeData()
    },
    getTreeDataRight(type) {
      treeBySpecialType(type).then((res) => {
        if (res.success && res.data.length) {
          this.treeData = res.data[0].children
          this.addResourceInfo(this.treeData)
        }
      })
    },
    getAllTreeData() {
      treeBySpecialType(5).then((res) => {
        if (res.success && res.data.length) {
          this.allTreeData = res.data[0].children
          this.addResourceInfo(this.allTreeData)
        }
      })
    },
    addResourceInfo(data) {
      const legendDataIdList = Object.keys(this.legendData)
      data.forEach((item) => {
        if (item.resourceInfo) {
          item.resourceInfo = item.resourceInfo.map(
            (item) => {
              item.show = false
              if (!item.children) {
                item.children = []
              }
              if (
                legendDataIdList.indexOf(item.pkid) !== -1
              ) {
                if (item.children.length) {
                  item.children.push(
                    ...this.legendData[item.pkid].map(
                      (legend, index) => {
                        return {
                          pkid: `${item.pkid}-legend-${index}`,
                          img: legend.img,
                          color: legend.color,
                          name: legend.name
                        }
                      }
                    )
                  )
                }
              }
              _layerManager.layers.forEach((e) => {
                if (e.id === item.pkid) {
                  item.show = true
                  if (
                    this.layerList.some(
                      (loadedLayer) =>
                        loadedLayer.pkid === item.pkid
                    )
                  ) {
                    return
                  }

                  const data = item
                  if (e.signService) {
                    if (
                      this.legendData[data.pkid] &&
                      this.legendData[data.pkid].length
                    ) {
                      // 有该服务的图例数据，不用请求
                      data.children = [
                        ...this.legendData[data.pkid]
                      ]
                      return
                    }
                    this.getLegendLayer(e.signService, data)
                  }

                  this.layerList.push(item)
                }
              })
              return item
            }
          )
          item.children = item.children.concat(
            item.resourceInfo
          )
        }
        if (item.children && item.children.length) {
          this.addResourceInfo(item.children)
        }
      })
    },
    // 获取服务的地图服务列表
    async getDataList(pkid) {
      const list = []
      await retrieveDataServiceById({
        pageIndex: 1,
        pageSize: 999,
        serviceId: pkid
      }).then((res) => {
        if (res.success) {
          if (res.data && res.data.length) {
            // 将配置的数据列表赋给原始数据
            list.push(...res.data)
          } else {
            this.$message.warning('该服务未配置数据')
          }
        } else {
          this.$message.error(
            res.message || '服务数据查询失败'
          )
        }
      })
      return list
    },
    async handleNodeClick(data, node, el) {
      // console.log('data', data);
      // console.log(data, node, el)
      if (data.catalogName) {
        // 点击了目录类型的节点
        // 什么也不做
      } else if (data.sourceName) {
        // 点击了服务类型的节点
        if (!data.dataList) {
          data.dataList = await this.getDataList(data.pkid)
        }
        data.show = !data.show // 添加或移除服务
        this.treeData = JSON.parse(
          JSON.stringify(this.treeData)
        )
        this.$forceUpdate()
        if (data.show) {
          this.layerList.push(data)
          if (data.serviceType === '27') {
            data.serviceUrl = data.dataList[0].serviceUrl
            data.signService = data.dataList[0].signService
            data.currentDataIndex = 0
            this.$bus.$emit('showDataList', data)
            _layerManager.add(data)
            console.log('添加服务', data)
          } else {
            data.serviceUrl = data.dataList[0].serviceUrl
            data.signService = data.dataList[0].signService
            data.currentDataIndex = 0
            this.$bus.$emit('showDataList', data)
            _layerManager.add(data)
            console.log('添加服务', data)
          }

          if (data.signService) {
            // if (
            //   this.legendData[data.pkid] &&
            //   this.legendData[data.pkid].length
            // ) {
            //   // 有该服务的图例数据，不用请求
            //   return
            // }
            this.getLegendLayer(data.signService, data)
          }
        } else {
          // console.log('移除服务', data)
          const index = this.layerList.findIndex((item) => {
            return item.pkid === data.pkid
          })

          if (index > -1) {
            this.layerList.splice(index, 1)
          }
          const find1 = this.layerList.find((item) => {
            return item.serviceType === '27'
          })
          if (data.serviceType === '27') {
            if (!find1) {
              this.$bus.$emit('hideRealspaceService')
            }
          }

          this.$bus.$emit(
            'handleBimDel',
            data.pkid,
            data.serviceType
          )
          _layerManager.del(data.pkid)
        }
      }
    },
    async handleAllNodeClick(data, node, el) {
      // console.log('data', data);
      // console.log(data, node, el)
      if (data.catalogName) {
        // 点击了目录类型的节点
        // 什么也不做
      } else if (data.sourceName) {
        // 点击了服务类型的节点
        if (!data.dataList) {
          data.dataList = await this.getDataList(data.pkid)
        }
        data.show = !data.show // 添加或移除服务
        this.allTreeData = JSON.parse(
          JSON.stringify(this.allTreeData)
        )
        if (data.show) {
          this.allLayerList.push(data)
          if (data.serviceType === '27') {
            data.serviceUrl = data.dataList[0].serviceUrl
            data.signService = data.dataList[0].signService
            data.currentDataIndex = 0
            this.$bus.$emit('showDataList', data)
            _layerManager.add(data)
            console.log('添加服务', data)
          } else {
            data.serviceUrl = data.dataList[0].serviceUrl
            data.signService = data.dataList[0].signService
            data.currentDataIndex = 0
            this.$bus.$emit('showDataList', data)
            _layerManager.add(data)
            console.log('添加服务', data)
          }

          if (data.signService) {
            // if (
            //   this.legendData[data.pkid] &&
            //   this.legendData[data.pkid].length
            // ) {
            //   // 有该服务的图例数据，不用请求
            //   return
            // }
            this.getLegendLayer(data.signService, data)
          }
        } else {
          // console.log('移除服务', data)
          const index = this.allLayerList.findIndex(
            (item) => {
              return item.pkid === data.pkid
            }
          )

          if (index > -1) {
            this.allLayerList.splice(index, 1)
          }
          const find1 = this.allLayerList.find((item) => {
            return item.serviceType === '27'
          })
          if (data.serviceType === '27') {
            if (!find1) {
              this.$bus.$emit('hideRealspaceService')
            }
          }

          this.$bus.$emit(
            'handleBimDel',
            data.pkid,
            data.serviceType
          )

          _layerManager.del(data.pkid)
        }
      }
    },
    handleNodeExpand(data, node, el) {
      this.defaultExpandedKeys.add(data.pkid)
    },
    handleNodeCollapse(data, node, el) {
      this.defaultExpandedKeys.delete(data.pkid)
    },
    handleAllNodeExpand(data, node, el) {
      this.allDefaultExpandedKeys.add(data.pkid)
    },
    handleAllNodeCollapse(data, node, el) {
      this.allDefaultExpandedKeys.delete(data.pkid)
    },
    getLegendLayer(url, data) {
      axios
        .get(url + '/layers.json')
        .then(async (res) => {
          if (res.data) {
            const subLayerNames = []
            const subLayers = []
            if (
              res.data &&
              res.data.length &&
              res.data[0].subLayers &&
              res.data[0].subLayers.layers.length
            ) {
              res.data[0].subLayers.layers.forEach(
                (subLayer) => {
                  subLayerNames.push(
                    subLayer.name + '@@' + res.data[0].name
                  )
                  subLayers.push(subLayer)
                }
              )
              // console.log('sublayers', subLayers)
              const legendDataList = []
              for await (const [
                subLayerIndex,
                subLayer
              ] of subLayers.entries()) {
                if (
                  subLayer.theme &&
                  subLayer.theme.items &&
                  subLayer.theme.items instanceof Array &&
                  subLayer.theme.items.length
                ) {
                  // 配置了专题图
                  for await (const item of subLayer.theme
                    .items) {
                    const tempLegendData = {
                      // name: subLayer.caption,
                      name: item.caption
                    }

                    let resourceType = ''
                    let requestNetworkImage = false
                    if (
                      subLayer.datasetInfo.type ===
                        'POINT' ||
                      subLayer.datasetInfo.type ===
                        'POINT3D'
                    ) {
                      resourceType = 'SYMBOLMARKER'
                      if (item.style.markerSymbolID !== 0) {
                        requestNetworkImage = true
                      }
                    } else if (
                      subLayer.datasetInfo.type ===
                        'LINE' ||
                      subLayer.datasetInfo.type === 'LINE3D'
                    ) {
                      resourceType = 'SYMBOLLINE'
                      if (item.style.lineSymbolID !== 0) {
                        requestNetworkImage = true
                      }
                    } else if (
                      subLayer.datasetInfo.type ===
                        'REGION' ||
                      subLayer.datasetInfo.type ===
                        'REGION3D'
                    ) {
                      resourceType = 'SYMBOLFILL'
                      if (item.style.fillSymbolID !== 0) {
                        requestNetworkImage = true
                      }
                    }
                    if (requestNetworkImage) {
                      try {
                        await axios
                          .get(
                            url +
                              `/symbol.json?resourceType=${resourceType}&style=` +
                              JSON.stringify(item.style) +
                              '&transparent=true'
                          )
                          .then((res) => {
                            // console.log('图例json数据', res)
                            if (
                              // res.status === 200 &&
                              res.data &&
                              res.data.resourceImageUrl
                            ) {
                              tempLegendData.img =
                                res.data.resourceImageUrl
                            }
                          })
                      } catch (e) {
                        console.error('请求图例图片错误', e)
                      }
                    } else {
                      if (resourceType === 'SYMBOLLINE') {
                        tempLegendData.color =
                          item.style.lineColor
                      } else if (
                        resourceType === 'SYMBOLFILL'
                      ) {
                        tempLegendData.color =
                          item.style.fillForeColor
                      }
                    }

                    // if (
                    //   item.style.markerSymbolID === 0 &&
                    //   item.style.lineSymbolID === 0 &&
                    //   item.style.fillSymbolID === 0
                    // ) {
                    //   if (
                    //     subLayer.datasetInfo.type === 'LINE'
                    //   ) {
                    //     tempLegendData.color =
                    //       item.style.lineColor
                    //   } else if (
                    //     subLayer.datasetInfo.type ===
                    //     'REGION'
                    //   ) {
                    //     tempLegendData.color =
                    //       item.style.fillForeColor
                    //   }
                    // } else {
                    //   let resourceType = ''
                    //   if (item.style.markerSymbolID !== 0) {
                    //     resourceType = 'SYMBOLMARKER'
                    //   } else if (
                    //     item.style.lineSymbolID !== 0
                    //   ) {
                    //     resourceType = 'SYMBOLLINE'
                    //   } else if (
                    //     item.style.fillSymbolID !== 0
                    //   ) {
                    //     resourceType = 'SYMBOLFILL'
                    //   }
                    //   try {
                    //     await axios
                    //       .get(
                    //         url +
                    //           `/symbol.json?resourceType=${resourceType}&style=` +
                    //           JSON.stringify(item.style) +
                    //           '&transparent=true'
                    //       )
                    //       .then((res) => {
                    //         // console.log('图例json数据', res)
                    //         if (
                    //           // res.status === 200 &&
                    //           res.data &&
                    //           res.data.resourceImageUrl
                    //         ) {
                    //           tempLegendData.img =
                    //             res.data.resourceImageUrl
                    //         }
                    //       })
                    //   } catch (e) {
                    //     console.error('请求图例图片错误', e)
                    //   }
                    // }
                    legendDataList.push(tempLegendData)
                  }
                } else {
                  // 未配置专题图
                  const subLayerName = subLayerNames[
                    subLayerIndex
                  ].replaceAll('#', '.')
                  legendDataList.push({
                    name: subLayer.caption,
                    img:
                      url +
                      '/layers/' +
                      subLayerName +
                      '/legend.png?width=30&height=30'
                  })
                }
              }

              if (legendDataList.length) {
                const tempList = legendDataList.map(
                  (item) => {
                    return {
                      img: item.img,
                      color: item.color,
                      name: item.name
                      // pkid: data.pkid + '-' + index
                    }
                  }
                )

                this.$bus.$emit(
                  'addLegendData',
                  tempList,
                  data.pkid
                )
              } else {
                this.$bus.$emit(
                  'addLegendData',
                  [],
                  data.pkid
                )
              }
            } else {
              this.$bus.$emit(
                'addLegendData',
                [],
                data.pkid
              )
            }
          } else {
            this.$bus.$emit('addLegendData', [], data.pkid)
          }
        })
        .catch((err) => {
          console.error('查询子图层失败', err)
          this.$bus.$emit('addLegendData', [], data.pkid)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.assets-tree {
  width: 276px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(25, 47, 61, 0.1),
    rgba(25, 47, 61, 0.9)
  );

  ::v-deep {
    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;

      &__nav-wrap::after {
        position: static !important;
      }

      &__active-bar {
        background-color: #00d2ff;
      }

      &__item {
        color: white;
      }

      &__item.is-active {
        color: #00d2ff;
      }

      &__item:hover {
        color: #00d2ff;
      }

      .el-tabs__header {
        margin-bottom: 0;
        padding: 0 10px;
      }

      .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          height: 100%;
          display: flex;
          flex-direction: column;
          overflow-y: hidden;
        }
      }
    }
  }

  .search {
    padding: 16px 13px;

    &-input {
      width: 100%;

      ::v-deep {
        .el-input__inner {
          background-color: rgba(255, 255, 255, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.5);
          border-radius: 0;
          color: #d2e6f0;
        }
      }
    }
  }

  .title {
    margin-bottom: 10px;

    &:not(:first-of-type) {
      margin-top: 10px;
    }

    &-prefix {
      position: relative;
      top: 2px;
      width: 4px;
      height: 12px;
      margin-right: 7px;
      object-fit: fill;
    }

    span {
      font-size: 16px;
      font-weight: 800;
      line-height: 14px;
      background: linear-gradient(
        180deg,
        white 0%,
        #a4bbdd 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  ::v-deep {
    .el-scrollbar {
      height: 100%;

      &__wrap {
        overflow-x: hidden;
      }

      &__view {
        padding: 0 13px;
      }
    }

    .el-tree {
      background-color: transparent;
      margin-bottom: 10px;

      &-node {
        &.is-focusable,
        &.is-current,
        &.is-expanded {
          .el-tree-node__content {
            background-color: transparent;

            &:hover {
              background-color: rgba(2, 8, 36, 0.3);
            }
          }
        }

        &__expand-icon:not(.is-leaf) {
          color: white;
          font-size: 14px;
        }

        &__content {
          height: 46px;
        }
      }

      .custom-tree-node {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        overflow-x: hidden;

        .label {
          color: white;
          font-size: 14px;
          margin-right: 8px;
          overflow-x: hidden;
          text-overflow: ellipsis;
        }

        .legend {
          width: 100%;
          overflow-x: hidden;
          margin-right: 8px;

          .el-image {
            height: 16px;
            margin-right: 8px;
          }

          &-image {
            width: 16px;
            height: 16px;
            margin-right: 8px;

            .image-slot {
              width: 100%;
              height: 100%;

              .error {
                width: 100%;
                height: 100%;
                background-color: grey;
              }
            }
          }

          .margin {
            flex: 1;
            overflow-x: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}

.toggle-enter-active,
.toggle-leave-active {
  transition: opacity 0.3s ease;
}

.toggle-enter-from,
.toggle-leave-to {
  opacity: 0;
}
</style>
